<template>
  <el-select
    v-model="name"
    filterable
    remote
    reserve-keyword
    :remote-method="remoteMethod"
    :loading="loading"
    @change="getFormValue"
    placeholder="请选择"
  >
    <el-option
      v-for="item in applyUserCodeOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

<script>
import { getList as getUserList } from "@/api/yybl/user";
export default {
  components: {},
  mixins: [], //表格的混入，主要包括表格上通用的方法和数据，比如查询，重置，分页这些功能
  props: {
    dataValue: {
      type: String,
      default: "",
    },
    value: {
      type: [String, Number, Array],
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      applyUserCodeOptions: [],
    };
  },
  watch: {},
  computed: {
    name: {
      get() {
        return this.value;
      },
      set(value) { 
        // name发生变化时执行，v-model=name,
        // el-select组件触发$emit('input')给el-input标签的name赋值，name被赋值以后触发setter
        this.$emit("input", value);
      },
    },
  },
  methods: {
    remoteMethod(userCode) {
      let params = {
        userCode,
        pageNum: 0,
        pageSize: 50,
      };
      getUserList(params).then((res) => {
        if (res.code == 200 || res.rescode == 200) {
          const { data } = res;
          let list = data.rows || data.dataList || [];
          this.applyUserCodeOptions = list.map((i) => ({
            label: i.userCode,
            value: i.userCode,
          }));
          this.loading = false;
        } else {
          this.loading = false;
        }
      });
    },
    getFormValue(value) {
      this.$emit("update:dataValue", value);
    },
  },
  created() {
    this.remoteMethod("");
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__content {
  .el-date-editor.el-input {
    width: 100%;
  }
}

::v-deep .el-button {
  .el-icon-edit + span {
    margin-left: 0px;
  }

  .el-icon-delete + span {
    margin-left: 0px;
  }
}

::v-deep .el-dialog {
  .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
  }

  .el-dialog__footer {
    border-top: 1px solid #e8e8e8;
  }
}

.queryform {
  ::v-deep .el-form {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
      max-width: 25%;
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 25%;
    }

    // .el-form-item:nth-child(7) {
    //   max-width: 100%;
    //   flex-basis: 100%;
    //   display: flex;
    //   justify-content: end;
    // }
  }
}
</style>
